<template>
  <div class="container">
    <div class="login">
      <div class="login-left">
        <img class="login-left-img" src="../../assets/login_left.png" alt="" />
      </div>
      <div class="login-right">
        <img src="../../assets/logo.png" alt="" />
        <div>
          <div class="login-right-top" style="margin-top: 64px"><span>Digital</span></div>
          <div class="login-right-top" style="margin-top: 12px"><span>Wonderland</span></div>
        </div>

        <div class="login-right-form" style="margin-top: 12px">
          <t-form ref="form" :data="formData" :colon="true" :label-width="0" @reset="onReset" @submit="onSubmit">
            <t-form-item name="account">
              <t-input v-model="formData.phone" clearable placeholder="请输入手机号">
                <template #prefix-icon>
                  <desktop-icon />
                </template>
              </t-input>
            </t-form-item>

            <t-form-item name="password">
              <t-input v-model="formData.password" type="password" clearable placeholder="请输入密码">
                <template #prefix-icon>
                  <lock-on-icon />
                </template>
              </t-input>
            </t-form-item>

            <t-form-item>
              <t-button theme="primary" type="submit" block>登录 / 注册</t-button>
            </t-form-item>
          </t-form>
        </div>
        <div class="login-right-bottom">Copyright © 2024-2099 wzl. All Rights Reserved.</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { DesktopIcon, LockOnIcon } from 'tdesign-icons-vue-next';
import { FormProps, MessagePlugin } from 'tdesign-vue-next';
import { reactive } from 'vue';
import { useRouter } from 'vue-router';

import { loginApi } from '@/api/auth';
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();
const router = useRouter();
const formData: FormProps['data'] = reactive({
  phone: '',
  password: '',
});
const onReset: FormProps['onReset'] = () => {
  MessagePlugin.success('重置成功');
};
const onSubmit: FormProps['onSubmit'] = async ({ validateResult, firstError }) => {
  if (validateResult === true) {
    const res = await loginApi(formData);
    console.log(res);
    localStorage.setItem('token', res.data.token);
    localStorage.setItem('id', res.data.leiId);
    userStore.token = res.data.token;
    MessagePlugin.success('登录成功');
    router.push('/home');
  } else {
    console.log('Validate Errors: ', firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};
</script>

<style scoped lang="less">
@import './index.less';
</style>
